<template>
   <div class="editNovel-main">
      <div class="com-header editNovelHeader">
          <button @click="$router.go(-1)">取消</button><span>已选{{selectArray.length}}本</span>
      </div>
      <div class="haveNovel">
           <div class="list-wrapper" v-if="followArr.length">
            <div class="header">
              <span class="title">特别关注</span>
              <span class="line"></span>
            </div>
            <div class="content">
              <ul class="imgText-type clearfix">
                <li v-for="(item,index) in followArr" :key="index">
                    <div class="list-item" @click="touchMethod(index,0)">
                        <div class="imges">
                            <img :src="item.coverimg" :alt="item.name">
                            <span class="dot" v-if="false"></span>
                            <span class="quan" :class="item.choose?'circle-select':'circle'" v-if="editType!=1"></span>
                        </div>
                        <p class="title ellipsis">{{item.name}}</p>
                        <P class="des ellipsis">上次读至 - {{item.lastReadName}}</P>
                    </div>
                </li>
              </ul>
              <div class="cover" v-if="editType==1"></div>
            </div>
          </div>
          <div class="list-wrapper" v-if="bookshelfArr.length">
            <div class="header">
              <span class="title">最近阅读</span>
              <span class="line"></span>
            </div>
            <div class="content">
              <ul class="imgText-type clearfix">
                <li v-for="(item,index) in bookshelfArr" :key="index">
                    <div class="list-item" @click="touchMethod(index,1)">
                        <div class="imges">
                            <img :src="item.coverimg" :alt="item.name">
                            <span class="dot" v-if="false"></span>
                            <span class="quan" :class="item.choose?'circle-select':'circle'" v-if="editType!=0"></span>
                        </div>
                        <p class="title ellipsis">{{item.name}}</p>
                        <P class="des ellipsis">上次读至 - {{item.lastReadName}}</P>
                    </div>
                </li>
              </ul>
              <div class="cover" v-if="editType==0"></div>
            </div>
          </div>
        </div>
        <div class="footer">
            <div class="edit-wrapper">
               <button class="followBtn" @click="editFollow"><i class="followIcon"></i>{{editType==0?'取消':'特别'}}关注</button><em>|</em><button class="deleteBtn" @click="deleteBook">删除</button>
            </div>
        </div>
  </div>
</template>

<script>
  import {Toast,MessageBox} from 'mint-ui'
  import api from '~/plugins/api.js'
  import axios from 'axios'
  import qs from 'qs'
  import storage from 'localforage'

  export default {
    head: {
        title: '快眼看书 - 新版快眼看书 - 小说搜索网',
        meta: [{
            name: 'description',
            content: '快眼看书小说搜索引擎聚合网络各大小说网站最新小说章节,无广告无弹窗全文阅读.'
        },{
            name: 'keyWords',
            content: '快眼看书,kuaiyankanshu,小说搜索,小说搜索网'
        }]
    },
    data () {
      return {
        circleClass: 'circle',
        editArray: [],
        selectArray: [],
        bookshelfArr: [],
        followArr: [],
        editType: 2,

      }
    },
    mounted() {
        this.initData()
    },
    methods: {
        async initData () {
            this.followArr = await storage.getItem('followKey') || []
            this.bookshelfArr = await storage.getItem('bookshelfKey') || []

            this.followArr.map(function(item,index,arr){
                item['choose'] = false
                return item
            })
            this.bookshelfArr.map(function(item,index,arr){
                item['choose'] = false
                return item
            })

            
        },
        touchMethod(index,editType) {
            this.editType = editType
            if(editType==0){
                this.editArray = this.followArr
            }else{
                this.editArray = this.bookshelfArr
            }
            this.editArray[index].choose = !this.editArray[index].choose
            this.$set(this.editArray,index,this.editArray[index])
            this.selectArray = this.editArray.filter((item,index)=>{
                if(item.choose) return item
            })
            
        },
        editFollow() {
            if(this.selectArray.length){
                if(this.editType==0){
                    this.bookshelfArr = this.selectArray.concat(this.bookshelfArr); // 增加最近阅读
                    this.followArr = this.common.unique(this.followArr,this.selectArray,'novelId') // 去掉取消关注的
                    storage.setItem('followKey',this.followArr)  // 缓存修改后关注小说
                    storage.setItem('bookshelfKey',this.bookshelfArr)  // 缓存修改后最近阅读
                }else{
                    this.followArr = this.selectArray.concat(this.followArr); // 增加特别关注
                    this.bookshelfArr = this.common.unique(this.bookshelfArr,this.selectArray,'novelId') // 去掉已关注的
                    storage.setItem('followKey',this.followArr)  // 缓存修改后关注小说
                    storage.setItem('bookshelfKey',this.bookshelfArr)  // 缓存修改后最近阅读
                }
                this.selectArray = []
            }
            
        },
        async deleteBook() {
            MessageBox.confirm(`您确定删除这${this.selectArray.length}本书籍吗?`).then(action => {
                this.deleteClick()
            }).catch(resp => {}); 
        },
        async deleteClick() {
            let arr = this.selectArray.map(function(item){
                return item.novelid
            })
            let novel_id = arr.join()
            let paramsData = {}
            let userInfo = await storage.getItem('userinfo')
            if(userInfo){
                paramsData = {
                    novel_id: novel_id,
                    token: userInfo.token,
                    uid: userInfo.uid
                }
                let result = await axios.post(api.deleteNovel,qs.stringify(paramsData))
                if(result){
                   // Toast(result.data.info)
                   let tStr = `  书籍删除已成功 ,数据将在十分钟后同步`
                    Toast(tStr)
                }else{
                    return
                }
            }
            if(this.editType==0){
                this.followArr = this.common.unique(this.followArr,this.selectArray,'novelId') 
                storage.setItem('followKey',this.followArr)  
            }else{
                this.bookshelfArr = this.common.unique(this.bookshelfArr,this.selectArray,'novelId') 
                storage.setItem('bookshelfKey',this.bookshelfArr)
            }
            let bookshelfIdArr = await storage.getItem('bookshelfIdKey')
            bookshelfIdArr = this.common.array_diff(bookshelfIdArr,arr)
            storage.setItem('bookshelfIdKey',bookshelfIdArr)
            
           
        }
    }
  }
</script>
